<template>
  <div class="app-container question">
    <div class="search filter-container">
      <span class="label">昵称：</span>
      <el-input class="inputWidth" v-model="search.userName" placeholder="提问人昵称" clearable></el-input>
      <span class="label">手机：</span>
      <el-input class="inputWidth" v-model="search.phone" placeholder="提问人手机" clearable></el-input>
      <span class="label">创建时间：</span>
      <el-date-picker
        v-model="timeRange"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="-"
        start-placeholder="提问时间起"
        end-placeholder="提问时间止"
        value-format="yyyy-MM-dd HH:mm:ss"
        :picker-options="pickerOptions"
        clearable
        style="width:255px"
      ></el-date-picker>
      <span class="label">问题类型：</span>
      <el-select v-model="search.questionType" placeholder="问题类型" clearable>
        <el-option v-for="item in questionType" :key="item.id" :label="item.title" :value="item.id"></el-option>
      </el-select>
      <span class="label">问题状态：</span>
      <el-select v-model="search.status" placeholder="问题状态" clearable class="inputWidth">
        <el-option
          v-for="item in questionStatus"
          :key="item.id"
          :label="item.label"
          :value="item.id"
        ></el-option>
      </el-select>
      <span class="label">指定回复：</span>
      <el-select v-model="search.proId" placeholder="指定回复" clearable class="inputWidth">
        <el-option v-for="item in proId" :key="item.id" :label="item.label" :value="item.id"></el-option>
      </el-select>
      <el-button type="primary" @click="searchTable">查询</el-button>
    </div>
    <div class="tableList">
      <el-table
        :data="tableList"
        v-loading="tableLoading"
        element-loading-text="数据加载中，请稍后"
        border
        fit
        highlight-current-row
      >
        <el-table-column align="center" label="提问人">
          <template slot-scope="scope">{{scope.row.userName }}</template>
        </el-table-column>
        <el-table-column align="center" label="联系电话">
          <template slot-scope="scope">{{scope.row.phone }}</template>
        </el-table-column>
        <el-table-column align="center" label="指定回复">
          <template slot-scope="scope">{{ scope.row.professorId == '0' ? '否' : '是' }}</template>
        </el-table-column>
        <el-table-column align="center" label="隐私保护">
          <template slot-scope="scope">{{scope.row.privacy=='0' ? '否' : '是' }}</template>
        </el-table-column>
        <el-table-column align="center" label="问题类型">
          <template slot-scope="scope">{{scope.row.questionType}}</template>
        </el-table-column>
        <el-table-column align="center" label="状态">
          <template slot-scope="scope">{{scope.row.status=="1" ? '有答案' : '无答案'}}</template>
        </el-table-column>
        <el-table-column align="center" label="创建时间">
          <template slot-scope="scope">{{scope.row.createTime | dateformat('YYYY-MM-DD HH:mm') }}</template>
        </el-table-column>
        <el-table-column align="center" label="提问内容" min-width="140">
          <template slot-scope="scope">
            <el-popover
              placement="top"
              width="160"
              trigger="hover"
              popper-class="popperClass"
            >
              <div style="text-align: center; margin: 0">
                <div>点击查看详情及回复</div>
              </div>
              <p style="color: #409EFF; textAlign: left; cursor: pointer;" slot="reference" @click="expertReply(scope.row)">{{ scope.row.title }}</p>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <div v-show="!tableLoading" class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="search.pageNo"
          :page-sizes="[10,20,30,50]"
          :page-size="search.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <el-dialog
      width="54%"
      :title="replyListDialog ? '追问详情' :'问答详情'"
      :visible.sync="questionDetailBox"
      class="popBox"
      @close="closeDialog"
      v-loading="dialogLoading"
      :center="true"
    >
      <!-- 问答详情 -->
      <div v-show="qstDetail">
        <div class="ask" v-if="questionDetail">
          <div class="picTop">
            <div class="userInfo">
              <span class="photo">
                <img :src="questionDetail.mgrQuestionVo.avatar">
              </span>
              <span>{{questionDetail.mgrQuestionVo.name}}</span>
            </div>
            <div
              class="time"
            >{{questionDetail.mgrQuestionVo.createtime | dateformat('YYYY-MM-DD HH:mm')}}</div>
          </div>
          <div class="askPic">
            <span v-for="(item, index) in questionPic" :key="index" @click="clickImg(index)">
              <img :src="item">
            </span>
            <div class="imgMask" v-if="showBigImg" @click.stop="showBigImg=!showBigImg">
              <div class="prev" @click.stop="prev" v-if="prevShow"></div>
              <div class="showImg">
                <img class="bigImg" :src="questionPic[num]">
              </div>
              <div class="next" @click.stop="next" v-if="nextShow"></div>
            </div>
          </div>
          <p>{{questionDetail.mgrQuestionVo.title}}</p>
        </div>
        <div class="questionDetail" v-if="questionDetail && questionDetail.mgrAnswerVoList.length>0">
          <div class="questionOne" v-for="item in questionDetail.mgrAnswerVoList" :key="item.userId">
            <div class="picTop">
              <div class="userInfo">
                <span class="photo">
                  <img :src="item.avatar">
                </span>
                <span>{{item.name}}</span>
              </div>
              <div class="time">{{item.createtime | dateformat('YYYY-MM-DD HH:mm')}}</div>
            </div>
            <p v-html="item.text"></p>
            <div class="message">
              <span class="watchMore" @click="watchMoreMsg(item)">
                <i>
                  <img src="../../assets/com_icon_ask_gray_40.png">
                </i>
                <span>查看更多</span>
              </span>
              <span class="help">
                <i>
                  <img src="../../assets/help.png">
                </i>
                <span>{{item.helpCount ? item.helpCount : '有帮助'}}</span>
              </span>
            </div>
          </div>
        </div>
        <div class="answer" v-if="roles[0] !== 'AGENCY_ADMIN' && temp.professorStatus=='0'">
          <el-button class="answer-send" type="primary" @click="reply" size="small">发送</el-button>
          <el-input
            resize="none"
            type="textarea"
            :autosize="{ minRows: 10, maxRows: 10}"
            v-model="content"
            placeholder="想要对提问人说...(回复最多500字)"
            maxlength="500"
          ></el-input>
        </div>
      </div>

      <!-- 追问详情 -->
      <div v-show="replyListDialog">
        <div class="ask" v-if="questionDetail">
          <div class="picTop">
            <div class="userInfo">
              <span class="photo">
                <img :src="replyStartAnswer.avatar">
              </span>
              <span>{{replyStartAnswer.name}}</span>
            </div>
            <div
              class="time"
            >{{replyStartAnswer.createtime | dateformat('YYYY-MM-DD HH:mm')}}</div>
          </div>
          <p>{{replyStartAnswer.text}}</p>
        </div>
        <ul class="replyGroup">
          <li class="replyItem" v-for="(item, index) of replyLists" :key="index">
            <div class="topTitle">
              <div class="replyAvatar">
                <img :src="item.replyUserHeadImg ? item.replyUserHeadImg : defaultAvatar" >
              </div>
              <div class="nameShow">{{item.replyUserName}} <span class="reply">回复</span> {{item.toUserName}}</div>
            </div>
            <div class="middleContent">{{item.content}}</div>
            <div class="bottomMsg">
              <div class="time">{{item.createTime | dateformat('YYYY-MM-DD HH:mm')}}</div>
              <div class="replyIcon" @click="handleInputShow(index)" v-show="item.replyUserSection !== 1">
                <img src="../../assets/com_icon_ask_gray_40.png" >
              </div>
            </div>
            <div class="replyArea" v-show="replyItem == index">
              <div class="replyToUserName">
                <span>追问</span>
                {{item.replyUserName}}
              </div>
              <textarea name="replyInput" id="replyInput" cols="30" rows="3" v-model="replyContent" placeholder="请输入追问内容"></textarea>
              <div class="replyBtn">
                <el-button type="primary" :disabled="replyContent == ''" @click="comfirmSubmit(item)">提交</el-button>
              </div>
            </div>
          </li>
        </ul>

        <div v-show="!dialogLoading" class="pagination">
          <el-pagination
            @size-change="handleDialogSizeChange"
            @current-change="handleDialogCurrentChange"
            :current-page.sync="dialogParams.pageNo"
            :page-sizes="[3,5,10,20,30]"
            :page-size="dialogParams.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="replyTotal"
          ></el-pagination>
        </div>
      </div>

    </el-dialog>

  </div>
</template>

<script>
import Tinymce from "@/components/Tinymce";
import { mapGetters } from "vuex";
import {
  questionType,
  expertList,
  isShowQuestion,
  expert,
  showReply,
  expertReply,
  replyAnswerList,
  replyAnswer,
} from "@/api/expert";
import { getInfo } from '@/api/login';
export default {
  components: { Tinymce },
  data() {
    return {
      userData: {},
      content: "",
      temp: {
        professorStatus: 0,
        status: 0
      },
      questionPic: [],
      questionDetail: {
        mgrQuestionVo: {
          pictures: []
        },
        mgrAnswerVoList: []
      },
      search: {
        pageNo: 1,
        pageSize: 20,
        professorId: null
      },
      timeRange: null,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      questionType: null,
      questionStatus: [
        {
          label: "无答案",
          id: "0"
        },
        {
          label: "有答案",
          id: "1"
        }
      ],
      proId: [
        {
          label: "全部",
          id: null
        },
        {
          label: "是",
          id: 1
        },
        {
          label: "否",
          id: 0
        }
      ],
      expert: [],
      tableList: null,
      tableLoading: true,
      total: null,
      isExpertLoading: false,
      questionDetailBox: false,
      questionDetail: null,
      questionPic: [],
      showBigImg: false,
      num: 0,
      prevShow: false,
      nextShow: false,
      replyListDialog: false,
      replyLists: [], // 回复列表
      replyItem: -1,
      replyContent: '', // 追问内容
      qstDetail: true,
      replyStartAnswer: {
        avatar: null,
        createtime: null,
        helpCount: null,
        id: null,
        name: null,
        pictures: null,
        text: null,
        userId: null,
      }, // 进入更多信息中的标题头
      dialogLoading: false,
      defaultAvatar: require('../../assets/default-avatar.png'),
      dialogParams: {
        answerId: null,
        pageNo: 1,
        pageSize: 3
      },
      replyTotal: null,
    };
  },
  mounted() {
    this.askType();
    this.expertList();
    this.getInfoData();
  },
  computed: {
    ...mapGetters(["roles", "id"])
  },
  methods: {
    // 获取用户信息
    getInfoData() {
      getInfo().then(res => {
        this.userData = res.data;
      })
    },

    // 查看更多回复消息
    watchMoreMsg(item) {
      this.replyStartAnswer = item;
      this.dialogParams.answerId = item.id;
      
      this.getReplyAnswerList();
    },

    // 是否确认提交
    comfirmSubmit(item) {
      this.$confirm('是否继续提交追问信息?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.submitReplyContent(item);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });          
      });
    },

    // 提交追问信息
    submitReplyContent(item) {
      const params = {
        answerId: item.answerId,
        content: this.replyContent,
        replyUserHeadImg: item.replyUserHeadImg,
        replyUserId: this.userData.id,
        replyUserName: this.userData.name,
        replyUserSection: 1, // 固定写死
        toUserId: item.replyUserId,
        toUserName: item.replyUserName,
        toUserSection: item.replyUserSection,
      };
      this.dialogLoading = true;
      replyAnswer(params).then(res => {
        this.replyItem = -1;
        this.replyContent = '';
        this.replyLists.push(res.data);
        this.dialogLoading = false;
        this.$message({
          type: 'success',
          message: '提交成功!'
        });
      })
    },

    // 关闭追问详情弹出框 
    closeDialog() {
      if (this.replyListDialog) {
        this.qstDetail = true;
        this.questionDetailBox = true;
        this.replyListDialog = false;
      } else {
        this.questionDetailBox = false;
      }
      this.replyContent = '';
      this.replyItem = -1;
      this.dialogParams = {
        answerId: null,
        pageNo: 1,
        pageSize: 3
      };
    },

    // 多少条一页
    handleDialogSizeChange(val) {
      this.dialogParams.pageSize = val;
      this.getReplyAnswerList();
    },
    // 分页
    handleDialogCurrentChange(val) {
      this.dialogParams.pageNo = val;
      this.getReplyAnswerList();
    },

    // 获取追问回复列表 
    getReplyAnswerList() {
      this.dialogLoading = true;
      replyAnswerList(this.dialogParams).then(response => {
        this.dialogLoading = false;
        if (response.data.total > 0) {
          this.replyListDialog = true;
          this.qstDetail = false;
          this.replyLists = response.data.list;
          this.replyTotal = response.data.total;
          console.log('replyLists', this.replyLists)

        } else {
          this.$message("没有更多消息");
        }
      });
    },
    handleInputShow(index) {
      this.replyContent = ''; // 清空文本框
      if (this.replyItem !== index) {
        this.replyItem = index;
      } else {
        this.replyItem = -1;
      }
    },



    reply() {
      let { temp, content } = this;
      let param = {};
      param["id"] = temp["id"];
      param["content"] = content;
      param["url"] = null;
      param["userId"] = temp["userId"];
      expertReply(param).then(response => {
        const { code } = response;
        if (code == 0) {
          this.$notify({
            title: "成功",
            message: "回复成功",
            type: "success",
            duration: 2000
          });
          this.questionDetailBox = false;
          this.expertList();
        }
      });
    },
    // 问题类型
    askType() {
      questionType().then(response => {
        const { code, data } = response;
        if (code == 0) {
          this.questionType = data;
        }
      });
    },
    //专家列表
    getExpertOptions(title) {
      if (title) {
        this.isExpertLoading = true;
        expert({ name: title }).then(response => {
          const { code, data } = response;
          if (code == 0) {
            this.expert = data;
            this.isExpertLoading = false;
          }
        });
      }
    },
    //专家问答列表
    expertList() {
      this.tableList = [];
      this.tableLoading = true;
      this.search.professorId = this.id;
      expertList(this.search).then(response => {
        const { code, data } = response;
        if (code == 0) {
          this.tableList = data.list;
          this.total = data.total;
          this.tableLoading = false;
        } else {
          this.tableLoading = false;
        }
      });
    },
    // 多少条一页
    handleSizeChange(val) {
      this.search.pageSize = val;
      this.expertList();
    },
    // 分页
    handleCurrentChange(val) {
      this.search.pageNo = val;
      this.expertList();
    },
    //搜素
    searchTable() {
      if (this.timeRange) {
        this.search.startTime = this.timeRange[0];
        this.search.endTime = this.timeRange[1];
      } else {
        delete this.search.startTime;
        delete this.search.endTime;
      }
      this.expertList();
    },
    //是否前台展示
    isShow(index, param) {
      let params = {
        action: param.isShow == 0 ? 1 : 0,
        id: param.id
      };
      isShowQuestion(params).then(response => {
        const { code, data } = response;
        if (code == 0) {
          this.$message({
            message: param.isShow == 0 ? "前台已隐藏" : "前台已显示",
            type: "success"
          });
          param.isShow == 0
            ? (this.tableList[index].isShow = 1)
            : (this.tableList[index].isShow = 0);
        }
      });
    },
    // 专家回复
    expertReply(param) {
      this.content = "";
      this.questionDetail = {
        mgrQuestionVo: {
          pictures: []
        },
        mgrAnswerVoList: []
      };
      showReply({ id: param.id }).then(response => {
        const { code, data } = response;
        if (code == 0) {
          this.temp = param;
          this.questionDetail = data;
          this.questionDetailBox = true;
          this.questionDetail = data;
          this.questionPic = this.questionDetail.mgrQuestionVo.pictures;
          if (this.questionPic.length > 1) {
            this.nextShow = true;
            this.prevShow = true;
          } else {
            this.nextShow = false;
            this.prevShow = false;
          }
        }
      });
    },
    clickImg(index) {
      this.showBigImg = true;
      this.num = index;
      if (index == 0) {
        this.prevShow = false;
        this.nextShow = true;
        if (this.questionPic.length == 1) {
          this.nextShow = false;
        }
      } else if (index == this.questionPic.length - 1) {
        this.nextShow = false;
        this.prevShow = true;
      } else {
        this.prevShow = true;
        this.nextShow = true;
      }
    },
    prev() {
      this.nextShow = true;
      this.num--;
      if (this.num == 0) {
        this.prevShow = false;
      } else {
        this.prevShow = true;
      }
    },
    next() {
      this.prevShow = true;
      this.num++;
      if (this.num == this.questionPic.length - 1) {
        this.nextShow = false;
      } else {
        this.nextShow = true;
      }
    }
  }
};
</script>

<style lang="scss">
.question {
  // 追问详情列表
  .replyGroup {
    background: #fff;
    padding: 30px 15px;
    list-style: none;

    .replyItem {
      width: 100%;
      padding: 16px 0;
      border-bottom: 1px solid #E5E8ED;

      .topTitle {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 10px;

        .replyAvatar {
          width: 41px;
          height: 41px;
          border-radius: 50%;
          overflow: hidden;
          margin-right: 10px;

          img {
            width: 100%;
            height: 100%;
          }

        }

        .nameShow {
          .reply {
            color: #C7C7C7;
            margin: 0 5px;
            font-size: 12px;
          }
        }

      }

      .middleContent {
        margin-left: 51px;
      }

      .bottomMsg {
        margin-top: 20px;
        margin-left: 51px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .time {
          color: #C7C7C7;
        }

        .replyIcon {
          width: 18px;
          height: 18px;

          img {
            width: 100%;
            height: 100%;
          }

        }

      }

      .replyArea {
        margin-left: 51px;
        border:1px solid #E5E8ED;
        padding: 10px 5px;
        margin-top: 10px;

        .replyToUserName {
          span {
            color: #C7C7C7;
            margin-right: 5px;
          }
        }

        #replyInput {
          width: 100%;
          border: none;
          margin-top: 15px;
          padding: 10px;
          box-sizing: border-box;
          border-bottom: 1px solid #E5E8ED;
        }

        .replyBtn {
          margin-top: 10px;
          text-align: right;
        }

      }

    }

  }

  .answer {
    position: relative;
    margin-top: 20px;
    .answer-send {
      position: absolute;
      bottom: 10px;
      right: 10px;
      z-index: 2;
    }
  }
  .inputWidth {
    width: 168px;
  }
  span.label {
    padding-left: 8px;
    font-size: 12px;
  }
  .tableList,
  .pagination {
    padding-top: 20px;
  }
  .el-table .cell {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
  .el-dialog {
    background: #f4f4f5;
  }
  .ask {
    background: #fff;
    padding: 15px;
    p {
      word-break: break-word;
    }
  }
  .picTop {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .userInfo {
    display: flex;
    align-items: center;
    .photo {
      width: 41px;
      height: 41px;
      border: 1px solid #f4f4f5;
      border-radius: 50%;
      display: inline-block;
      overflow: hidden;
      margin-right: 10px;
      img {
        width: 100%;
      }
    }
  }
  .askPic {
    width: 80%;
    margin: 0 auto;
    span {
      width: 28%;
      height: 155px;
      margin: 0px 20px;
      display: inline-block;
      overflow: hidden;
      border: 2px solid #f4f4f5;
      img {
        width: 100%;
        cursor: pointer;
      }
    }
  }
  .questionDetail {
    background: #fff;
    padding: 0px 15px 15px;
    margin-top: 15px;
    .picTop {
      padding-top: 15px;
      width: 100%;
    }
    p {
      word-break: break-word;
    }
  }
  .questionOne {
    border-bottom: 1px solid #f4f4f5;
  }
  .message {
    text-align: right;
    padding-bottom: 10px;
    .help, .watchMore {
      i {
        width: 18px;
        height: 18px;
        display: inline-block;
        vertical-align: sub;
        img {
          width: 100%;
        }
      }
    }
    .watchMore {
      margin-right: 10px;
      cursor: pointer;
    }
  }
  .imgMask {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.6);
  }
  .showImg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 10px solid #fff;
  }
  .bigImg {
    max-height: 700px;
  }
  .prev {
    position: absolute;
    top: 50%;
    left: 10%;
    width: 0;
    height: 0;
    border-width: 15px 15px 15px 0;
    border-style: solid;
    border-color: transparent #fff transparent transparent; /*透明 灰 透明 透明 */
    margin: 40px auto;
    cursor: pointer;
  }
  .next {
    position: absolute;
    top: 50%;
    right: 10%;
    width: 0;
    height: 0;
    border-width: 15px 0 15px 15px;
    border-style: solid;
    border-color: transparent transparent transparent #fff; /*透明 透明 透明 灰*/
    margin: 40px auto;
    cursor: pointer;
  }
}

.popperClass {
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  .popper__arrow::after{
    border-top-color: rgba(0, 0, 0, 0.6) !important;
    bottom: 0 !important;
  }
  
}

.popperClass:hover {
  cursor: pointer;
}

textarea::-webkit-input-placeholder {
	color: #C7C7C7;
}

textarea::-moz-placeholder {
	color: #c7c7c7;
}

textarea::-moz-placeholder {
	color: #c7c7c7;
}

textarea:-ms-input-placeholder {
	color: #c7c7c7;
}
</style>
